<template>
  <div class="container">
    <div class="header-box">
        <h3><span>任务信息</span></h3>
        <div class="collapse-box">
            <el-collapse v-model="activeNames" @change="">
                <el-collapse-item title="基础信息" name="1">
                    <ul>
                        <li><span>任务编号：</span>18</li>
                        <li><span>任务名称：</span>军民通用物资质量分析</li>
                        <li><span>任务创建时间：</span>2024-08-05  10:30</li>
                        <li><span>任务状态：</span>已完成</li>
                      <li><span>任务数据量：</span>5</li>
                      <li><span>任务执行时间：</span>2024-08-08  10:17</li>
                    </ul>
                </el-collapse-item>
                <el-collapse-item title="规则信息" name="2">
                    <el-tag size="small" type="success" closable>值域校验</el-tag><el-tag size="small" type="success" closable>空值校验</el-tag>
                    <el-tag size="small" type="success" closable>值域校验</el-tag><el-tag size="small" type="success" closable>空值校验</el-tag>
                    <el-tag size="small"  closable>唯一性校验</el-tag>
                </el-collapse-item>
                <el-collapse-item title="任务数据详情" name="3">
                </el-collapse-item>
            </el-collapse>
        </div>
        <h3><span>执行详情</span></h3>
        <div class="steps-box">
            <div class="bg">
                <div class="collapse2-box">
                    <el-collapse v-model="activeNames2" @change="">
                        <el-collapse-item title="数据1综合评分80分" name="1">
                            <p>产品码：空值校验不同过，缺失产品码</p>
                            <p>基准名：正则校验通过，一致性校验不通过</p>
                            </el-collapse-item>
                        <el-collapse-item title="数据2综合评分70分" name="2">
                            <p>产品码：空值校验不同过，缺失产品码</p>
                            <p>基准名：正则校验通过，一致性校验不通过</p>
                        </el-collapse-item>
                        <el-collapse-item title="数据3综合评分95分" name="3">
                        </el-collapse-item>
                    </el-collapse>
                </div>

            </div>
            <!-- <el-steps :active="active" finish-status="success">
                <el-step title=""></el-step>
                <el-step title=""></el-step>
                <el-step title=""></el-step>
            </el-steps> -->
        </div>
        <el-table :data="tableData" border stripe size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
            <el-table-column prop="name" label="任务名称" align="center" ></el-table-column>
            <el-table-column prop="type" label="任务状态" align="center" width="180"></el-table-column>
            <el-table-column prop="amount" label="评分" align="center" width="180"></el-table-column>
            <el-table-column prop="" label="操作" width="200" align="center" >
                <template slot-scope="scope">
                    <el-button size="mini" type=""  @click="">查看</el-button>
                    <el-button size="mini" type="primary" @click="$router.push('/report')">查看报告</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background
        @size-change=""
        @current-change=""
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="5">
        </el-pagination>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'details',
  data() {
      return {
        activeNames: ['1'],
        activeNames2: ['1'],
        currentPage4: 1,
        active: 2,
        tableData: [{
          code:11,
          name: '军民通用物资质量分析-1',
          date: '2016-05-02',
          type:'完成',
          amount:95,
          date2: '2016-05-02',
          execute: 1
        },{
          code:12,
          name: '军民通用物资质量分析-2',
          date: '2016-05-02',
          type:'完成',
          amount:81,
          date2: '2016-05-02',
          execute: 3
        },{
          code:12,
          name: '军民通用物资质量分析-3',
          date: '2016-05-02',
          type:'完成',
          amount:88,
          date2: '2016-05-02',
          execute: 2
        },{
          code:12,
          name: '军民通用物资质量分析-4',
          date: '2016-05-02',
          type:'完成',
          amount:92,
          date2: '2016-05-02',
          execute: 1

        },{
          code:13,
          name: '军民通用物资质量分析-5',
          date: '2016-05-02',
          type:'完成',
          amount:96,
          date2: '2016-05-02',
          execute: 3
        }]
      }
   }
}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
    .collapse-box{
        padding: 10px 20px;
        ul{
            margin: 0;
            li{
                display: inline-block;
                width: 33%;
                font-size: 14px;
                color: #666;
                line-height: 30px;
            }
        }
        .el-tag{
            margin-right: 5px;
        }
    }
    .header-box{
        background-color: #FFF;
        height: 100%;
    }
    .steps-box{
        width: 1000px;
        padding: 10px 20px;
        position:relative;
        margin-bottom: 20px;
        .bg{
            width: 100%;
            height: 200px;
            // margin-bottom: 30px;
            background:url("/bg.png") left top no-repeat;
            background-size:cover ;
        }
        .collapse2-box{
            width: 200px;
            height: 200px;
            border: 1px solid #EBEEF5;
            overflow:auto;
            position: absolute;
            right: 270px;
            top:20px;
        }
        .el-steps{
            width: 500px;
            margin-left: 300px;

        }
    }
</style>
